<template functional>
    <a-sub-menu :key="props.currentRoute.path">
        <template slot="title">
            <template v-if="props.currentRoute.meta.icon">
                <svg-icon :icon="props.currentRoute.meta.icon"></svg-icon>
            </template>
            <span style="margin-left:16px" class="menu-title">{{ props.currentRoute.meta.title }}</span>
        </template>
        <template  v-for="item in (props.currentRoute.children || [])">
            <template v-if="!item.hidden && item.path">
                <template v-if="!item.children">
                    <menu-item :key="item.path" :currentRoute="item" />
                </template>
                <sub-menu v-if="item.children && item.children.length" :key="item.path" :currentRoute="item" />
            </template>
        </template> 
    </a-sub-menu>
</template>

<script>
import menuItem from './menuItem';
export default {
    name: 'subMenu',
    components: { menuItem },
    props: {
        currentRoute: {
            type: Object,
            default:()=>{}
        }
    }
};
</script>
